<template>
  <div class="menu">
    <div class="mark"></div>
    <div class="types">
      <p>
        <span class="hide" @click="hide">X</span>
        <span>选择分类</span>
      </p>
      <div class="navMenu">
        <ul>
          <li :class="active == -1 ? 'active' : ''" @click="changeMenu(-1, -1)">
            全部
          </li>
          <li
            v-for="(item, i) in menuList"
            :key="i"
            :class="active == i ? 'active' : ''"
            @click="changeMenu(i, item.cate1Id)"
          >
            {{ item.cate1Name }}
          </li>
        </ul>
      </div>
      <div class="menuCotent">
        <ul>
          <li
            v-for="(item, i) in menuContList"
            :key="i"
          >
            <img :src="item.icon" alt="" />
            {{ item.cate2Name }}
          </li>
          <li v-show="active == -1"></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    menuContList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      active: -1,
    };
  },
  methods: {
    hide() {
      this.$emit("hide");
    },
    changeMenu(i, val) {
      this.active = i;
      this.$emit("changeMenu", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.types {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  z-index: 15;
  font-size: 0.32rem;
  background: #fff;
}
.active {
  color: red;
}
.mark {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 14;
}

.types > p:first-child {
  position: relative;
  height: 1rem;
  border-bottom: 1px solid red;
  line-height: 1rem;

  span:first-child {
    position: absolute;
    left: 0.2rem;
  }

  span:last-child {
    text-align: center;
  }
}
.types ul {
  width: 200%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.navMenu {
  width: 100%;
  height: 1rem;
  overflow-x: scroll;
  line-height: 0.8rem;
}
.menuCotent {
  width: 100%;
  height: 7rem;
  overflow-y: scroll;
  background-color: #f4f4f4;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 2.45rem;
      height: 2rem;
      border-bottom: 0.01rem solid #ccc;
      border-right: 0.01rem solid #ccc;
      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img {
        width: 50%;
        border-radius: 50%;
      }
    }
  }
}
</style>
